import Base from '@/components/Base';
import {
  Button,
  Card,
  Form,
  Radio,
  Input,
  Badge,
  Select,
  Table,
  Modal,
  message,
  Popover,
} from 'antd';
import { KayButton, View, Text } from '@/components/KayUI';
import styles from './index.less';
import SmoothScroll from '@/components/SmoothScroll';
import Color from 'color';

interface State {
  scrollY?: number;
}

export default class Index extends Base<any, State> {
  public state: State = {};

  public async didShow() {}

  public async didMount() {
    // console.log('history', this.navigator.history)
    setTimeout(() => {
      this.scrollRef && this.scrollRef.start();
    }, 300);
  }

  public render() {
    const { scrollY } = this.state;
    const delayList = [0.02, 0.05, 0.07, 0.1, 0.4];
    return (
      <SmoothScroll
        initCallback={(e) => (this.scrollRef = e)}
        style={{
          background: '#f2f3f4',
        }}
        onScroll={(obj) => {
          // console.log('scroll YYYY:', obj.scroll.y)
          this.setState({
            scrollY: obj.scroll.y,
          });
        }}
      >
        <View data-scroll-section>
          <Text type="h2">Smooth Scroll</Text>
        </View>
        <View
          data-scroll-section
          style={{
            position: 'relative',
            zIndex: 1,
          }}
        >
          <View
            data-scroll
            data-scroll-speed="-8"
            style={{
              alignItems: 'flex-end',
            }}
          >
            <Text
              style={{ backgroundColor: Color.rgb(155, 55, 255).lighten(0.5) }}
            >
              {scrollY} -- scrollY
            </Text>
          </View>
        </View>
        <View data-scroll-section>
          <Text className={this.cx(styles.test, styles.b)}>cx测试</Text>
          <Text style={{ color: Color.rgb(155, 55, 255) }} type="h1">
            h1
          </Text>
          <Text
            style={{ color: Color.rgb(155, 55, 255).lighten(0.5) }}
            type="h2"
          >
            h2
          </Text>
          <Text
            style={{ color: Color.rgb(155, 55, 255).lighten(0.2) }}
            type="h3"
          >
            h3
          </Text>
          <Text
            style={{ color: Color.rgb(155, 55, 255).darken(0.5) }}
            type="h4"
          >
            h4
          </Text>
          <Text
            style={{ color: Color.rgb(155, 55, 255).saturate(0.5) }}
            type="h5"
          >
            h5
          </Text>
          <Text
            style={{ color: Color.rgb(155, 55, 255).desaturate(0.5) }}
            type="h6"
            data-scroll
          >
            h6
          </Text>
          <Text>p</Text>
        </View>
        <View data-scroll-section>
          <View style={{ height: 180, background: '#cde' }}></View>
          <View style={{ height: 180, background: '#cad' }}></View>
          <View style={{ height: 180, background: '#ca3' }}></View>
          <View
            style={{ height: 180, background: '#cde' }}
            data-scroll
            data-scroll-speed="3"
          >
            <Text>速度3： data-scroll-speed="3"</Text>
          </View>
          <View style={{ height: 180, background: '#ce9' }}></View>
          <View
            style={{ height: 180, background: '#cad' }}
            data-scroll
            data-scroll-speed="2"
          >
            <Text>速度2： data-scroll-speed="2"</Text>
          </View>
        </View>

        <View style={{ flexDirection: 'row' }}>
          <View data-scroll-section>
            <View style={{ height: 180, background: '#ea9' }}></View>
            <View style={{ flexDirection: 'row' }}>
              {delayList.map((e) => (
                <View
                  style={{ flex: 1 }}
                  data-scroll
                  data-scroll-speed="2"
                  data-scroll-delay={e}
                >
                  <View
                    style={{
                      ...Styles.rowItem,
                      background: this.randomColor(e),
                    }}
                  >
                    <Text>
                      延迟{e}： data-scroll-delay="{e}"
                    </Text>
                  </View>
                </View>
              ))}
            </View>
          </View>
          <View id="about-cols">
            <View data-scroll-section style={{}}>
              <View
                data-scroll
                data-scroll-sticky
                data-scroll-target="#about-cols"
              >
                <View style={{ ...Styles.rowItem, background: '#ecc' }}>
                  <Text>
                    sticky：
                    data-scroll-sticky（id要放到一个没有data-scroll的View上）
                  </Text>
                </View>
              </View>
            </View>
          </View>
        </View>

        <View
          data-scroll-section
          style={{
            position: 'relative',
          }}
        >
          <View id="direction">
            <View
              style={{
                position: 'relative',
                transform: 'translateX(-40vw) rotate(26deg)',
              }}
            >
              <Text
                style={Styles.bigTxt}
                data-scroll
                data-scroll-direction="horizontal"
                data-scroll-speed="6"
                data-scroll-target="#direction"
                data-scroll-delay="0.08"
              >
                I'm moving in this direction1
              </Text>
            </View>
            <View
              style={{
                position: 'relative',
                transform: 'rotate(9deg)',
              }}
            >
              <Text
                style={Styles.bigTxt}
                data-scroll
                data-scroll-direction="horizontal"
                data-scroll-speed="9"
                data-scroll-target="#direction"
                data-scroll-delay="0.05"
              >
                I'm moving in this direction2
              </Text>
            </View>
            <View
              style={{
                position: 'relative',
                transform: 'translateX(-20vw) rotate(-19deg)',
              }}
            >
              <Text
                style={Styles.bigTxt}
                data-scroll
                data-scroll-direction="horizontal"
                data-scroll-speed="15"
                data-scroll-target="#direction"
              >
                I'm moving in this direction3
              </Text>
            </View>
          </View>
        </View>

        <View data-scroll-section>
          <View
            style={{ height: 380, background: '#e6a' }}
            data-scroll-direction="horizontal"
          ></View>
          <View style={{ height: 380, background: '#e79' }}></View>
          <View style={{ height: 380, background: '#ec9' }}></View>
        </View>
      </SmoothScroll>
    );
  }
  private scrollRef: any;

  private randomColor = (num: number) => {
    // return '#e'+parseInt(String(Math.random()*10))+'c'
    // return 'rgba('+(num*500+30)+','+(num*360+70)+','+(num*400+100)+',1)'
    return 'hsl(106deg ' + (num * 200 + 30) + '% ' + (num * 150 + 40) + '%)';
  };
}

const Styles = {
  rowItem: {
    height: 180,
  },
  bigTxt: {
    fontSize: 100,
    background: '#000',
    color: '#fff',
  },
};

// export default function IndexPage() {
//   return (
//     <div>
//       <h1 className={styles.title}>Page index</h1>
//     </div>
//   );
// }
